<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-28 10:06:54
 * @LastEditTime: 2019-10-11 16:03:20
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="top">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="avator-info">
      <!-- <Theme></Theme> -->
      <el-avatar class="avatar" size="medium" :src="circleUrl"></el-avatar>
      <el-dropdown @command="handlerPersonInfo">
        <span class="el-dropdown-link">
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
          <el-dropdown-item>主题设置</el-dropdown-item>
          <el-dropdown-item disabled command= "setting">个人设置</el-dropdown-item>
          <el-dropdown-item divided command="logout">退出登陆</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
    </div>
  </div>
</template>

<script>

import { clearLocalStroageByName } from '../utils/stroage';
// import Theme from '../components/Theme'

export default {
    name: 'top',
    computed: () =>{
      // console.log(this.$route.params)
      return this.$route.params
    },
    data: () => {
      return {
        circleUrl: ''
      }
    },
    components: {
      // Theme
    },
    mounted() {
        // 调用请求数据的方法
        this.getNavData();
    },
    methods: {
      getNavData() {
        // 请求数据
        // this.axios.get('/api/test')
        //   .then( data => {
        //     console.log(data)
        //   })
         this.axios({
            url: '/api/post/test',
            method: 'post',
            params: { 'id': 1 }
          }).then(response => {
            console.log(response)
          })
      },
      getUserInfo() {
         this.$message({
            message: '获取用户信息成功',
            type: 'success'
        });
      },
      logout() {
        clearLocalStroageByName('isLogin');
        this.$message({
            message: '退出登陆成功！',
            type: 'success'
        });
        this.$router.push('/login');
      },
      handlerPersonInfo(command) {
        // console.log(command)
        switch (command) { 
          case 'userInfo':
            this.getUserInfo(); 
            break;
          case 'setting':
            this.setting(); 
            break;
          case 'logout':
            this.logout(); 
            break;
          default :
            
        }
      }
    }

}
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  height: 100%;
  flex-direction: row;
  justify-content: space-between; 
  align-items: center;
  height: 60px;
  padding: 0 15px;
  box-sizing: border-box;
  box-shadow: 0 1px 5px #009342;
  .avator-info {
    display: flex;
    height: 100%;
    flex-direction: row;
    align-items: center;
    margin-right: 50px;
    .avatar {
      margin-left: 10px;
    }
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
}
</style>
